<template>
  <div class="fit row q-pa-sm">
    <div class="col-4 full-height">
      <q-scroll-area class="fit">
        <q-tree
          :nodes="simple"
          node-key="label"
          selected-color="primary"
          v-model:selected="selected"
          default-expand-all
        />
      </q-scroll-area>
    </div>
    <div class="col-8 full-height">
      <q-scroll-area class="fit">
        <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="add" label="新增" />
          <q-tab name="show" label="查看" />
          <q-tab name="edit" label="编辑" />
          <q-tab name="delete" label="删除" />
        </q-tabs>
        <q-tab-panels
          v-model="tab"
          animated
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="add">
            <div class="column">
              <q-form class="row">
                <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                  <q-item>
                    <q-select
                      square
                      dense
                      filled
                      class="full-width"
                      v-model="model"
                      :options="options"
                      label="上级菜单"
                    />
                  </q-item>
                </div>
                <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                  <q-item>
                    <q-input
                      dense
                      square
                      filled
                      class="full-width"
                      v-model="text"
                      label="菜单名称"
                    />
                  </q-item>
                </div>
              </q-form>
              <div>
                <q-item>
                  <q-btn label="提交" type="submit" color="primary" />
                  <q-btn
                    label="重置"
                    type="reset"
                    color="primary"
                    flat
                    class="q-ml-sm"
                  />
                </q-item>
              </div>
            </div>
          </q-tab-panel>
          <q-tab-panel name="show">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                <q-item>
                  <q-item-section>
                    <q-item-label>系统管理</q-item-label>
                    <q-item-label caption>上级菜单</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
              <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                <q-item>
                  <q-item-section>
                    <q-item-label>菜单管理</q-item-label>
                    <q-item-label caption>菜单名称</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
            </div>
          </q-tab-panel>

          <q-tab-panel name="edit">
            <div class="column">
              <q-form class="row">
                <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                  <q-item>
                    <q-select
                      square
                      dense
                      filled
                      class="full-width"
                      v-model="model"
                      :options="options"
                      label="上级菜单"
                    />
                  </q-item>
                </div>
                <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                  <q-item>
                    <q-input
                      dense
                      square
                      filled
                      class="full-width"
                      v-model="text"
                      label="菜单名称"
                    />
                  </q-item>
                </div>
              </q-form>
              <div>
                <q-item>
                  <q-btn label="提交" type="submit" color="primary" />
                  <q-btn
                    label="重置"
                    type="reset"
                    color="primary"
                    flat
                    class="q-ml-sm"
                  />
                </q-item>
              </div>
            </div>
          </q-tab-panel>
          <q-tab-panel name="delete">
            <div class="text-h4 q-mb-md">删除界面</div>
          </q-tab-panel>
        </q-tab-panels>
      </q-scroll-area>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { ref, watch } from 'vue';
const selected = ref('Food');
const tab = ref('show');
const $q = useQuasar();
const model = ref(null);
const text = ref('');
const options = ['系统管理', '菜单管理', '用户管理'];

watch(selected, (newValue) => {
  $q.notify({
    position: 'center',
    message: newValue,
  });
});

const simple = [
  {
    label: '系统管理',
    children: [
      {
        label: '菜单管理',
        icon: 'restaurant_menu',
      },
      {
        label: '用户管理',
        icon: 'room_service',
      },
      {
        label: '角色管理',
        icon: 'photo',
      },
    ],
  },
  {
    label: '组件展示',
    children: [
      {
        label: '表格',
        icon: 'restaurant_menu',
      },
      {
        label: '按钮',
        icon: 'room_service',
      },
      {
        label: '列表',
        icon: 'photo',
      },
    ],
  },
  {
    label: '一级菜单',
    children: [
      {
        label: '二级菜单',
        icon: 'restaurant_menu',
      },
      {
        label: '二级菜单展开',
        icon: 'room_service',
        children: [
          {
            label: '三级菜单',
            icon: 'restaurant_menu',
          },
          {
            label: '三级菜单展开',
            icon: 'restaurant_menu',
            children: [
              {
                label: '四级菜单',
                icon: 'restaurant_menu',
              },
            ],
          },
        ],
      },
    ],
  },
];
</script>

<style scoped></style>
